
import Taro, {Component} from '@tarojs/taro'
import {inject, observer} from '@tarojs/mobx'
import {View, Text, Image, Form, Button} from '@tarojs/components'
import './orderDetail.less'
import './orderEdit.less'

import {getRuntime, subtime, getCaNumber,huocheId} from '../../utils/common'
import AreaStore from '../../store/AreaStore'
import {IStoreProps} from '../../store/Stores'


interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class OrderDetail extends Component<IHomeProps> {

  state = {
    info: {}, // 订单详情
    carInfo: {}, // 提交的车辆信息
    fileList: Array(7).fill(null), // 相关文件
    huocheId,
    currentNavId: 1, // 默认为1
    isCards: false, // 是否注册
    quality: 0,
    id: 0,
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: '订单修改'})
    let userInfo = getRuntime().getUserInfo() || {}
    if(Object.keys(userInfo).length <=0) {
      getRuntime().showToast('你还未登录, 即将跳转登录~')
      setTimeout(() => { getRuntime().navigateTo('/pages/other/bindPhone') }, 2000)
      return
    }
    let orderId = this.$router.params.id
    if(!orderId) {
      getRuntime().showToast('参数失败,请重试~')
      setTimeout(() => { getRuntime().navigateTo('/pages/order/index') }, 2000)
      return
    }

    this.setState({ id: orderId }, () => { this.getOrder() })
  }

  getOrder() {
    let { id } = this.state
    let { homeStore } = this.props.stores
    homeStore.getOrder({
      formId: id,
      callback: res => {
        let info = res
        let carInfo =  info.carOrderDetails[0]
        AreaStore.getAllProvinceFromLocal({
          callBack: res => {
            res.map(item => {
              if(item.value === carInfo.province){
                info.provinceText = item.label
              }
            })
          }
        })
        let currentNavId = 1
        if(carInfo&&carInfo.quality>0) { currentNavId = huocheId }
        this.setState({
          info,
          carInfo,
          currentNavId,
          isCards: carInfo.isRegister,
          quality: carInfo.quality
        })
      }
    })
  }

  link(url: string = '/pages/index/index') {
    getRuntime().navigateTo(url)
  }

  uploadFile(index: number) {
    getRuntime().upload((res) => {
      let temp = this.state.fileList
      temp.splice(index, 1, res)
      this.setState({ fileList: temp })
    }, 1)
  }

  submit() {
    let { info, isCards, fileList, currentNavId, huocheId } = this.state
    let carUserPicture = fileList[0] // 身份证
    let carDrivePicture = fileList[1] // 行驶证
    let buyCarPicture = fileList[2] // 购车发票
    let carStandardPicture = fileList[3] // 车辆合格证
    let carUserPictureTwo = fileList[4] // 身份证反面
    let carDrivePictureTwo = fileList[5] // 行驶证反面

    if (!carUserPicture) {getRuntime().showToast('请上传车主身份证正面照~');return}
    if (isCards && !carDrivePicture) {getRuntime().showToast('请上传行驶证~');return}
    if (!isCards && !buyCarPicture) {getRuntime().showToast('请上传购车发票~');return}
    if (!isCards && !carStandardPicture) {getRuntime().showToast('请上传车辆合格证~');return}
    // 货车需要上传身份证反面和行驶证第二页
    if (currentNavId === huocheId && isCards) {
      if (!carUserPictureTwo) {
        getRuntime().showToast('请上传身份证反面~');
        return
      }
      if (!carDrivePictureTwo) {
        getRuntime().showToast('请上传行驶证第二页~');
        return
      }
    }

    let {homeStore} = this.props.stores
    homeStore.updateOrder({
     form: {
       id: info.id,
       carDrivePicture,
       carDrivePictureTwo,
       carUserPicture,
       carUserPictureTwo,
       buyCarPicture,
       carStandardPicture
     },
      callback: res => {
        console.log(res)
        // orderNo 订单字段
        getRuntime().showToast('订单修改成功,请等待客服处理!')
        setTimeout(() => {
          getRuntime().navigateTo('/pages/order/index')
        }, 2000)
      }
    })
  }

  render() {
    let { info,carInfo,fileList,huocheId,currentNavId,isCards   } = this.state
    return (
      <View className='packge-detail'>
        <View className='packge__status resonce ss'>
          <View className='packge__text f32'>
            驳回原因：
            {
              info.rejectionReason
            }
          </View>
        </View>

        <View className='line-desc'>
          <View className='line'>
            <View className='line__title'>出单省份: </View>
            <View className='line__con'>{info&&info.provinceText}</View>
          </View>
          <View className='line'>
            <View className='line__title'>车牌号码: </View>
            <View className='line__con'>{getCaNumber(carInfo['carNumber'])}</View>
          </View>
          <View className='line'>
            <View className='line__title'>车辆规格: </View>
            <View className='line__con'>{carInfo['carSpec']}</View>
          </View>
          <View className='line'>
            <View className='line__title'>缴费金额: </View>
            <View className='line__con color-theme yuan'>{carInfo['price']}</View>
          </View>
          <View className='line'>
            <View className='line__title'>纳税年份: </View>
            <View className='line__con'>
              <Text className='after-line'>{info.createYear}</Text>
            </View>
          </View>
        </View>
        <View className='interval' />

        <View className='line-desc'>
          <View className='line'>
            <View className='line__title'>车主姓名: </View>
            <View className='line__con'>{carInfo['carUserName']}</View>
          </View>
          <View className='line'>
            <View className='line__title'>是否上牌: </View>
            <View className='line__con'>{carInfo.isRegister?'已上牌':'未上牌'}</View>
          </View>
          {
            currentNavId==3&&
            <View className='line'>
               <View className='line__title'>货车整备质量: </View>
               <View className='line__con'>{carInfo.quality}kg</View>
            </View>
          }
          <View className='line'>
            <View className='line__title'>订单号码: </View>
            <View className='line__con'>{info.orderNo}</View>
          </View>
          <View className='line'>
            <View className='line__title'>缴费时间: </View>
            <View className='line__con'>{subtime(info.creationTime)}</View>
          </View>
        </View>
        <View className='interval' />

        <View className='form-wrap content-30'>
          <Form onSubmit={this.submit.bind(this)}>
            {/*上传文件框*/}
            <View className='form-wrap__group form-wrap__tb'>
              <View className='form-wrap__title'>上传相关证件</View>
              {
                // 已上牌
                isCards &&
                <View className='form-wrap__content form-wrap__file'>
                   <View className='file-wrap' onClick={this.uploadFile.bind(this, 0)}>
                      <Image src={require('../../assets/img/icon_04.png')} className='upload-icon'/>
                      <View className='title placeholder-class'>请上传车主身份证正面照 <View>(证件号码清晰)</View></View>
                     {
                       fileList[0] && <Image src={fileList[0]} className='upload-img'/>
                     }
                   </View>
                  {
                    // 货车-身份证反面
                    currentNavId === huocheId &&
                    <View className='file-wrap' onClick={this.uploadFile.bind(this, 4)}>
                       <Image src={require('../../assets/img/icon_04.png')} className='upload-icon'/>
                       <View className='title placeholder-class'>请上传车主身份证反面照 <View>(证件清晰)</View></View>
                      {
                        fileList[4] && <Image src={fileList[4]} className='upload-img' />
                      }
                    </View>
                  }

                   <View className='file-wrap' onClick={this.uploadFile.bind(this, 1)}>
                      <Image src={require('../../assets/img/icon_04.png')} className='upload-icon'/>
                      <View className='title placeholder-class'>请上传机动车行驶证照片 <View>(第一页,证件号码清晰)</View></View>
                     {
                       fileList[1] && <Image src={fileList[1]} className='upload-img'/>
                     }
                   </View>
                  {
                    // 货车-行驶证第二页
                    currentNavId === huocheId &&
                    <View className='file-wrap' onClick={this.uploadFile.bind(this, 5)}>
                       <Image src={require('../../assets/img/icon_04.png')} className='upload-icon'/>
                       <View className='title placeholder-class'>请上传机动车行驶证照片 <View>(第二页)</View></View>
                      {
                        fileList[5] && <Image src={fileList[5]} className='upload-img'/>
                      }
                    </View>
                  }
                </View>
              }
              {
                !isCards &&
                <View className='form-wrap__content form-wrap__file'>
                   <View className='file-wrap' onClick={this.uploadFile.bind(this, 0)}>
                      <Image src={require('../../assets/img/icon_04.png')} className='upload-icon'/>
                      <View className='title placeholder-class'>请上传车主身份证正面照 <View>(证件号码清晰)</View></View>
                     {
                       fileList[0] && <Image src={fileList[0]} className='upload-img'/>
                     }
                   </View>
                  {
                    // 货车
                    currentNavId === huocheId &&
                    <View className='file-wrap' onClick={this.uploadFile.bind(this, 4)}>
                       <Image src={require('../../assets/img/icon_04.png')} className='upload-icon' />
                       <View className='title placeholder-class'>请上传车主身份证反面照 <View>(证件清晰)</View></View>
                      {
                        fileList[4] && <Image src={fileList[4]} className='upload-img' />
                      }
                    </View>
                  }
                   <View className='file-wrap' onClick={this.uploadFile.bind(this, 2)}>
                      <Image src={require('../../assets/img/icon_04.png')} className='upload-icon' />
                      <View className='title placeholder-class'>请上传购车发票</View>
                     {
                       fileList[2] && <Image src={fileList[2]} className='upload-img' />
                     }
                   </View>
                   <View className='file-wrap' onClick={this.uploadFile.bind(this, 3)}>
                      <Image src={require('../../assets/img/icon_04.png')} className='upload-icon'/>
                      <View className='title placeholder-class'>请上传车辆合格证</View>
                     {
                       fileList[3] && <Image src={fileList[3]} className='upload-img'/>
                     }
                   </View>
                </View>
              }
            </View>
            <View className='footer-block' />
            <Button className='page-submit' formType='submit'>立即提交</Button>
          </Form>
        </View>
      </View>
    )
  }
}
export default OrderDetail
